<template>
  <div>
    <div class="title_insurance">
      保单号：{{ form.insuranceOdd }} 到期时间：{{ parseTime(form.endTime, '{y}-{m}-{d}') }}
    </div>
    <el-row :gutter="20" class="mb8">
      <el-col :span="12">
        <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" label-width="68px">
          <el-form-item label="项目名称" prop="projectName">
            <el-input v-model="queryParams.projectName" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="员工名称" prop="staffName">
            <el-input v-model="queryParams.staffName" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="在职状态" prop="staffStatus">
            <el-select v-model="queryParams.staffStatus" placeholder="请选择" clearable @keyup.enter.native="handleQuery">
              <el-option label="已在岗" value="2"></el-option>
              <el-option label="待离职" value="4"></el-option>
              <el-option label="已离职" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否申报" prop="isDeclare">
            <el-select v-model="queryParams.isDeclare" placeholder="请选择" clearable @keyup.enter.native="handleQuery">
              <el-option label="是" value="Y"></el-option>
              <el-option label="否" value="N"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2">
        <div>&nbsp;<br></div>
      </el-col>
      <el-col :span="10">
        <el-form :model="queryParams1" ref="queryForm1" size="mini" :inline="true" label-width="68px">
          <el-form-item label="项目名称" prop="projectName">
            <el-input v-model="queryParams1.projectName" placeholder="请输入" clearable @keyup.enter.native="handleQuery1" />
          </el-form-item>
          <el-form-item label="员工名称" prop="staffName">
            <el-input v-model="queryParams1.staffName" placeholder="请输入" clearable @keyup.enter.native="handleQuery1" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery1">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mb8">
      <el-col :span="12">
        <span class="related">已关联{{ connectedList.length }}人</span><el-link type="primary" @click="handleViewHistory">查看历史操作记录</el-link>
        <el-table border :selectable="selectHandle" :data="connectedList" @selection-change="handleSelectionConnectedChange" max-height="1000" height="1000">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="项目名称" align="center" prop="projectName"/>
          <el-table-column label="姓名" align="center" prop="staffName" />
          <el-table-column label="姓名" align="center" prop="staffName" />
          <el-table-column label="性别" align="center" prop="staffSex"  width="60px"/>
          <el-table-column label="身份证号" align="center" prop="staffIdcard" width="200px;"/>
          <el-table-column label="年龄" align="center" width="60px">
            <template slot-scope="scope">
              {{ calculateAge(scope.row.staffIdcard) }}
            </template>
          </el-table-column>
          <el-table-column label="联系电话" align="center" prop="staffPhone"/>
          <el-table-column label="在职状态" align="center" prop="staffStatus">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.staffStatus == 2 && ![3].includes(scope.row.resignApprovalStatus) " type="success">在岗</el-tag>
              <el-tag v-if="[3].includes(scope.row.resignApprovalStatus) && scope.row.staffStatus != 3" type="danger">待离职</el-tag>
              <el-tag v-if="scope.row.staffStatus == 3 && [3].includes(scope.row.resignApprovalStatus)" type="danger">已离职</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="是否申报" align="center" prop="isDeclare"  width="80px">
            <template slot-scope="scope">
              {{ scope.row.isDeclare == 'Y' ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" v-if="scope.row.isDeclare == 'N'" @click="handleUnbinding(scope.row)"
                v-hasPermi="['cld:insurance:unbinding']">解绑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="2" class="btn">
        <el-button type="primary" icon="el-icon-arrow-left" size="small" @click="handleAddInsurance"></el-button>
        <el-button type="primary" icon="el-icon-arrow-right" size="small" @click="handleRemoveInsurance"></el-button>
      </el-col>
      <el-col :span="10">
        <span class="related">未关联</span>
        <el-table border :data="notAssociatedList" @selection-change="handleSelectionNotAssociatedChange"
          max-height="1000" height="1000">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="项目名称" align="center" prop="projectName" />
          <el-table-column label="姓名" align="center" prop="staffName"/>
          <el-table-column label="性别" align="center" prop="staffSex"/>
          <el-table-column label="身份证号" align="center" prop="staffIdcard"/>
          <el-table-column label="年龄" align="center" width="100">
            <template slot-scope="scope">
              {{ calculateAge(scope.row.staffIdcard) }}
            </template>
          </el-table-column>
          <el-table-column label="联系电话" align="center" prop="staffPhone"/>
        </el-table>
      </el-col>
    </el-row>


    <!-- 历史操作记录 -->
    <el-drawer title="历史操作记录" :visible.sync="historyOpen" direction="rtl" size="40%">
      <el-table :data="staticsStaffList" border>
        <el-table-column align="center" label="动作" prop="operaStatus">
          <template slot-scope="scope">
            <span v-if="scope.row.operaStatus == 1">新增</span>
            <span v-if="scope.row.operaStatus == 3">解绑</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作人数" prop="operaCount"></el-table-column>
        <el-table-column align="center" label="操作时间" prop="operaTime"></el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleView(scope.row)"
              v-hasPermi="['cld:insurance:edit']">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>


    <!-- 查看历史操作记录详情 -->
    <el-dialog :title="title" :visible.sync="viewHistoryOpen" width="50%" append-to-body>
      <el-row>
        <el-table :data="insuranceStaffList" border>
          <el-table-column label="项目名称" align="center" prop="projectName" />
          <el-table-column label="姓名" align="center" prop="staffName" />
          <el-table-column label="性别" align="center" prop="staffSex" />
          <el-table-column label="年龄" align="center">
            <template slot-scope="scope">
              {{ calculateAge(scope.row.staffIdcard) }}
            </template>
          </el-table-column>
          <el-table-column label="身份证号" align="center" prop="staffIdcard" />
          <el-table-column label="联系电话" align="center" prop="staffPhone" />
        </el-table>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="viewHistoryOpen = false">关 闭</el-button>
      </div>
    </el-dialog>

    <div class="dialog-footer-options">
      <el-button @click="cancel">关 闭</el-button>
    </div>
  </div>
</template>

<script>
import { getInsurance, relatedPersonnel, selectInsuranceStaff, selectCldInsuranceStaffStatisticsList, selectCldInsuranceStaffList } from "@/api/cld/insurance";
import { getListStaff } from '@/api/cld/staff'

export default {
  name: "Insurance",
  data() {
    return {
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      // 已关联人员
      connectedList: [],
      // 未关联人员
      notAssociatedList: [],
      // 查询参数
      queryParams: {
        insuranceId: this.$route.params.insuranceId,
        projectName: null,
        staffName: null,
        staffStatus: null,
        isDeclare: null
      },
      // 查询参数
      queryParams1: {
        projectName: null,
        staffName: null,
        inOddIsEmpty: 1,
        staffStatus: 2,
      },
      // 保险信息
      form: {},
      // 查看操作状态
      operaStatus: 0,
      // 历史操作记录抽屉
      historyOpen: false,
      // 历史操作记录详情弹框
      viewHistoryOpen: false,
      // 操作记录统计
      staticsStaffList: [],
      // 历史操作人员记录
      insuranceStaffList: [],
      title: '',
      // 保险id
      insuranceId: null,
      // 记录新增人员
      addStaffList: [],
      // 记录解绑人员
      removeStaffList: []
    };
  },
  created() {
    this.insuranceId = this.$route.params && this.$route.params.insuranceId;
    if (this.insuranceId) {
      this.getInsuranceInfo();
    }
  },
  methods: {
    // 查询保险信息
    getInsuranceInfo() {
      getInsurance(this.insuranceId).then(res => {
        this.form = res.data;
        this.handleGetStaffList();
      })
    },
    // 查询员工列表
    handleGetStaffList() {
      // 查询已关联
      selectInsuranceStaff(this.queryParams).then(res => {
        this.connectedList = res.data;
      })
      // 查询未关联
      getListStaff(this.queryParams1).then(res => {
        this.notAssociatedList = res.data;
      })
    },
    // 已申报的禁用勾选
    selectHandle(row, index) {
      return !(row.declareNumber > 0)
    },
    // 已关联人员勾选
    handleSelectionConnectedChange(selection) {
      this.removeStaffList = selection.map(item => item.staffId)
    },
    // 未关联人员勾选
    handleSelectionNotAssociatedChange(selection) {
      this.addStaffList = selection.map(item => item.staffId)
    },
    // 新增已关联
    handleAddInsurance() {
      if (this.addStaffList.length == 0) {
        this.$modal.msgError("请选择未关联人员！");
        return;
      }
      let form = {
        insuranceId: this.insuranceId,
        staffIds: this.addStaffList,
        operaStatus: 1
      };
      this.handleRelatedSubmit(form);
    },
    // 解绑
    handleUnbinding(row) {
      this.removeStaffList.push(row.staffId);
      this.handleRemoveInsurance();
    },
    // 解绑已关联
    handleRemoveInsurance() {
      if (this.removeStaffList.length == 0) {
        this.$modal.msgError("请选择已关联人员！");
        return;
      }
      let form = {
        insuranceId: this.insuranceId,
        staffIds: this.removeStaffList,
        operaStatus: 3
      };
      this.handleRelatedSubmit(form);
    },
    // 新增 解绑 提交
    handleRelatedSubmit(form) {
      let _this = this;
      this.$modal.confirm('是否确认操作？').then(function () {
        relatedPersonnel(form).then(res => {
          _this.$modal.msgSuccess("操作成功");
          _this.getInsuranceInfo();
        })
      }).catch(() => { });
    },
    // 查看历史操作记录
    handleViewHistory() {
      selectCldInsuranceStaffStatisticsList({
        insuranceId: this.insuranceId
      }).then(res => {
        this.staticsStaffList = res.data;
        this.historyOpen = true;
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.handleGetStaffList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery1() {
      this.queryParams1.pageNum = 1;
      this.handleGetStaffList();
    },
    /** 重置按钮操作 */
    resetQuery1() {
      this.resetForm("queryForm1");
      this.handleQuery1();
    },
    // 查看历史记录详情
    handleView(row) {
      if (row.operaStatus == 1) {
        this.title = '新增操作';
      } else if (row.operaStatus == 2) {
        this.title = '替换操作';
      } else {
        this.title = '解绑操作';
      }
      selectCldInsuranceStaffList({
        insuranceId: this.insuranceId,
        operaStatus: row.operaStatus
      }).then(res => {
        this.insuranceStaffList = res.data;
        this.viewHistoryOpen = true;
      })

    },
    // 关闭页面
    cancel() {
      const obj = { path: "/cloudManage/personnel/insurance", name: "insurance" };
      this.$tab.closeOpenPage(obj);
      this.$tab.refreshPage(obj);
    }
  }
};
</script>
<style scoped>
.el-range-editor.el-input__inner {
  width: 100%;
}

.title_insurance {
  margin: 0px auto 30px auto;
  color: black;
  font-size: 22px;
  font-weight: 600;
}

.related {
  font-size: 16px;
  margin-right: 20px;
  margin-bottom: 10px;
}

::v-deep .el-drawer__header> :first-child {
  color: black;
  font-weight: 700;
  font-size: 22px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 600px;
}
</style>
